<script setup lang="ts">
  import { computed, ref, onMounted } from 'vue'
  import { useGlobalStore } from '@/stores/global'

  const globalStore = useGlobalStore()
  const user = ref()

  onMounted(async () => {
    user.value = await globalStore.ensureUserInfo()
  })

  // 格式化数字显示
  const formatNumber = (num: number) => {
    if (num >= 10000) {
      return `${(num / 10000).toFixed(1)}万`
    } else if (num >= 1000) {
      return `${(num / 1000).toFixed(1)}k`
    }
    return num.toString()
  }

  // 格式化日期，只显示年月日
  const formattedBuildTime = computed(() => {
    const buildTime = globalStore.siteStats.buildTime
    if (!buildTime) return '未知'
    const date = new Date(buildTime)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    })
  })

  // 格式化最后更新时间
  const formattedLastUpdateTime = computed(() => {
    const lastPushTime = user.value?.lastPushBlogTime
    if (!lastPushTime) {
      return new Date().toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      })
    }
    const date = new Date(lastPushTime)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    })
  })

  const stats = computed(() => [
    {
      label: '文章数',
      mobileLabel: '文章',
      value: globalStore.siteStats.totalPosts,
      icon: '📝',
      color: '#3b82f6',
    },
    {
      label: '总访问',
      mobileLabel: '访问',
      value: formatNumber(globalStore.siteStats.totalViews),
      icon: '👁️',
      color: '#10b981',
    },
    {
      label: '评论数',
      mobileLabel: '评论',
      value: globalStore.siteStats.totalComments,
      icon: '💬',
      color: '#f59e0b',
    },
    {
      label: '运行天数',
      mobileLabel: '运行',
      value: globalStore.siteStats.runningDays,
      icon: '📅',
      color: '#ef4444',
    },
  ])
</script>

<template>
  <div class="site-stats">
    <h3 class="stats-title">📊 网站统计</h3>

    <div class="stats-grid">
      <div
        v-for="stat in stats"
        :key="stat.label"
        class="stat-card"
        :style="{ '--stat-color': stat.color }"
      >
        <div class="stat-icon">{{ stat.icon }}</div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label desktop-label">{{ stat.label }}</div>
          <div class="stat-label mobile-label">{{ stat.mobileLabel }}</div>
        </div>
      </div>
    </div>

    <!-- 额外信息 -->
    <div class="additional-info">
      <div class="info-item">
        <span class="info-label">建站时间:</span>
        <span class="info-value">{{ formattedBuildTime }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">最后更新:</span>
        <span class="info-value">{{ formattedLastUpdateTime }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .site-stats {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
  }

  .stats-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .stat-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      background: var(--stat-color, var(--primary-color));
      color: white;

      .stat-value {
        color: white;
      }

      .stat-label {
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }

  .stat-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .stat-content {
    flex: 1;
    min-width: 0;
  }

  .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
    transition: color 0.3s ease;
  }

  .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap; // 确保标签文字不换行
  }

  // 默认显示桌面端标签
  .mobile-label {
    display: none;
  }

  .desktop-label {
    display: block;
  }

  .additional-info {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
  }

  .info-label {
    color: var(--text-secondary);
  }

  .info-value {
    color: var(--text-primary);
    font-weight: 500;
  }

  /* 响应式设计 */
  @media (max-width: 1024px) {
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }

    .stat-card {
      padding: 0.75rem;
    }

    .stat-value {
      font-size: 1.1rem;
    }
  }

  @media (max-width: 768px) {
    .site-stats {
      padding: 1rem;
    }

    .stats-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
    }

    .stat-card {
      flex-direction: column;
      text-align: center;
      padding: 0.75rem 0.5rem;
      gap: 0.5rem;
      min-width: 0; // 确保flex子项可以缩小
    }

    .stat-icon {
      font-size: 1.2rem;
    }

    .stat-value {
      font-size: 1rem;
    }

    .stat-label {
      font-size: 0.7rem; // 稍微减小字体大小
      line-height: 1; // 确保行高为1，避免多行显示
    }

    // 移动端显示简化标签
    .desktop-label {
      display: none;
    }

    .mobile-label {
      display: block;
    }
  }

  @media (max-width: 480px) {
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .additional-info {
      font-size: 0.8rem;
    }
  }
</style>
